<template>
  <div class="container">
    <!-- 每个分类对应的内容 -->
    <div class="list">
      <!-- 左侧标题栏 -->
      <div class="side_tab">
        <ul>
          <li v-for="(item, index) in typeList" :key="index" class="type_item" :class="isTypeSelected===index?'selected_item':''" @click="handleGoodsList(index, item.cat_id)">
            {{ item.cat_name }}
          </li>
        </ul>
      </div>
      <!-- 右侧商品列表 -->
      <div class="goods_list" v-if="goodsByTypeList.length===0">
        暂无数据
      </div>
      <div class="goods_list" v-else>
        <ul>
          <li v-for="(item, index) in goodsByTypeList" :key="index" class="goods_box">
            <router-link to="/detail" tag="div" class="item_img" @click.native="getGoodDetail(item.goods_id)">
              <img :src="item.goods_imgs[0]">
            </router-link>
            <div class="item_info">
              <h3 class="item_name">{{ item.goods_name }}</h3>
              <p class="item_desc"> {{ item.goods_introduce }}</p>
              <div class="item_label_box">
                <div :class="item.goods_label === '' ? '' : 'item_label'">{{ item.goods_label }}</div>
              </div>
              <div class="item_price">
                <span class="item_current">¥{{ item.goods_price }}</span>
                <span class="item_oldPrice">{{ item.goods_oldprice | priceFilter }}</span>
                <add-cart :good="item" :id="item.goods_id"></add-cart>
            </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import AddCart from '@/pages/common/AddCart.vue'
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'List',
  computed: {
    ...mapState(['typeList', 'goodsByTypeList', 'isTypeSelected'])
  },
  filters: {
    priceFilter (value) {
      if (value !== 0) return '¥' + value
      return ''
    }
  },
  components: {
    AddCart
  },
  methods: {
    ...mapMutations(['changeType', 'getGoodDetail']),
    // 点击切换子分类
    handleGoodsList (index, id) {
      const obj = {
        index,
        id
      }
      this.changeType(obj)
    },
    getGoodDetail (id) {
      this.$store.commit('getGoodDetail', id)
    }
  }
}
</script>

<style lang="less" scoped>
// @import '../../../assets/styles/goods.css';
.container {
  overflow: hidden;
  flex: 1;
  padding-bottom: 2rem;
}
.list {
  display: flex;
  width: 100%;
  height: 100%;
  background-color: #fff;
  border-top-left-radius: .4rem;
}
// 左侧子分类导航栏
.side_tab {
  overflow-x: hidden;
  overflow-y: scroll;
    &::-webkit-scrollbar {
      display: none;
    }
  height: 100%;
  border-right: 1px solid rgba(232, 232, 232, 0.3);
  .type_item {
    width: 4rem;
    height: 2rem;
    line-height: 2rem;
    font-size: .56rem;
    text-align: center;
  }
  .selected_item {
    color: rgb(255, 20, 147);
  }
}
// 右侧商品列表
.goods_list {
  flex: 1;
  overflow-x: hidden;
  overflow-y: scroll;
    &::-webkit-scrollbar {
      display: none;
    }
  height: 100%;
  font-size: .72rem;
  padding: .2rem .4rem 0;
}
.goods_box {
  display: flex;
  height: 5.6rem;
  padding: .4rem 0;
  border-bottom: 1px solid rgba(232, 232, 232, 0.3);
  .item_img {
    width: 3rem;
    height: 3rem;
    align-self: center;
    img {
      width: 100%;
    }
  }
  .item_info {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    .item_name {
      font-size: .64rem;
      color: #333;
    }
    .item_desc {
      overflow: hidden;
      font-size: .56rem;
      color: #666;
      white-space: nowrap;
      text-overflow: ellipsis;
      margin: .3rem 0;
    }
    .item_label_box {
      flex: 1;
      .item_label {
        height: .64rem;
        line-height: .64rem;
        font-size: .48rem;
        color: red;
        border: 0.5px solid red;
        border-radius: .32rem;
        padding: 0 .12rem;
      }
    }
    .item_price {
      position: relative;
      height: 1rem;
      line-height: 1rem;
      margin-top: .2rem;
      .item_current {
        font-size: .64rem;
        color: rgb(255, 20, 147);
      }
      .item_oldPrice {
        font-size: .48rem;
        text-decoration: line-through;
        color: #999;
        padding-left: .4rem;
      }
    }
  }
}
</style>
